<template>
  <div class="access-list">
    <div class="access-list-head">
      <div class="list-name">
        <span class="cn">我的预约</span>
        <span class="en">MY XXXXXXX</span>
      </div>
      <div class="all-list-wrapper" @click="onCheckAll">预约历史
        <van-icon class="arrow" name="arrow" size="11px" color="#828489"></van-icon>
      </div>
    </div>
    <div class="access-table-list" v-if="showBtn">
      <div class="table-list-box">
        <div class="left-box">
          <div class="access-people">
            <div class="access-input-box">
              <span>被访问人:</span><span>xxx</span>
            </div>
          </div>
          <div class="access-phone">
            <div class="access-input-box">
              <span>被访问人电话:</span><span>13177869512</span>
            </div>
          </div>
          <div class="appointment-time">
            <div class="access-input-box">
              <span>访问时间:</span><span>2020-03-25 15：00</span>
            </div>
          </div>
        </div>
        <div class="right-box">
          <div class="status"><van-icon name="success" size="50px" color="green"/></div>
        </div>
      </div>
      <div class="table-list-box">
        <div class="left-box">
          <div class="access-people">
            <div class="access-input-box">
              <span>被访问人:</span><span>xxx</span>
            </div>
          </div>
          <div class="access-phone">
            <div class="access-input-box">
              <span>被访问人电话:</span><span>13177869512</span>
            </div>
          </div>
          <div class="appointment-time">
            <div class="access-input-box">
              <span>访问时间:</span><span>2020-03-25 15：00</span>
            </div>
          </div>
        </div>
        <div class="right-box">
          <div class="status"><van-icon name="cross" size="50px" color="red"/></div>
        </div>
      </div>
      <div class="table-list-box">
        <div class="left-box">
          <div class="access-people">
            <div class="access-input-box">
              <span>被访问人:</span><span>xxx</span>
            </div>
          </div>
          <div class="access-phone">
            <div class="access-input-box">
              <span>被访问人电话:</span><span>13177869512</span>
            </div>
          </div>
          <div class="appointment-time">
            <div class="access-input-box">
              <span>访问时间:</span><span>2020-03-25 15：00</span>
            </div>
          </div>
        </div>
        <div class="right-box">
          <div class="status">通过</div>
        </div>
      </div>

      <div class="table-list-box">

      </div>
      <div class="table-list-box">

      </div>
    </div>
    <div class="access-table-image" v-else>
      <van-image
        width="100%"
        height="280px"
        :src="imageSrc"></van-image>
    </div>
    <div class="access-footer">
      <van-button round custom-class="submit-btn" type="info" @click="onBookingClick">
        <span class="submit-btn-text">
           <van-icon size="20px" color="#fff" name="plus"/>
        发起预约</span>
      </van-button>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        imageSrc: require('../../../static/images/no_list_img.png')
      }
    },
    props: {
      showBtn: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      onCheckAll () {
        this.$emit('onCheckAll')
      },
      onBookingClick () {
        this.$emit('onBookingClick')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .access-list {
    background: #fff;
    margin-top: 40px;

    .access-list-head {
      width: 100%;
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;

      .list-name {
        flex: 3;
        justify-content: center;
        margin-left: 20px;

        .cn {
          font-size: 20px;
          font-weight: 700;
        }

        .en {
          margin-left: 10px;
          font-size: 12px;
        }
      }

      .all-list-wrapper {
        justify-content: center;
        flex: 1;
        font-size: 14px;
      }
    }

    .access-table-list {
      width: 90%;
      margin: 0 5%;
      .table-list-box:first-child {
        border-top: none;
      }

      .table-list-box {
        width: 100%;
        height: 120px;
        border-top: 4px solid #ddd;
        display: flex;
        justify-content: space-around;

        .left-box {
          flex: 3;
          justify-content: center;
          .access-input-box {
            margin: 5px 20px 0px 25px;
            display: flex;
            justify-content: space-between;
            span {
              height: 30px;
              line-height: 30px;
              font-size: 14px;
            }
            span:first-child {
              font-weight: 500;
              text-align: left;
            }

            span:nth-child(2) {
              text-align: right;
            }
          }
        }

        .right-box {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          .status {
          }
        }
      }
    }

    .access-footer {
      width: 100%;
      position: fixed;
      bottom: 10px;
      display: flex;
      justify-content: center;
    }
  }
</style>
<style lang="scss">
  .access-footer {
    .submit-btn {
      width: 300px;
      font-size: 14px;
      color: #3696ef;
      border: 1px solid #edeeee;
      line-height: 20px;

      .submit-btn-text {
        font-size: 18px;
        color: white;

        van-icon {
          vertical-align: -13%;
        }
      }

    }
  }
</style>
